<template>
  <div>
    <van-stepper v-model="counts" input-width="26px" button-size="22px" @change="onChange" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      counts: this.count,
      // 传过来的id
      id: this.getIds
    };
  },
  props: ["count", "getIds"],
  methods: {
    onChange(e) {
      // 改变了数量要重新改变state的goods商品数据
      // 根据id判断是哪个商品更改了，然后添加或减少数据
      let c = e;
      let goodsInfo = { count: c, id: this.id };
      this.$store.commit("stepperChangeGoods", goodsInfo);
    //   重新赋值到localstorage
      localStorage.setItem("goods", JSON.stringify(this.$store.state.goods));
      //重新渲染到shopCar
      this.$emit('getGod');
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.van-stepper__input {
  margin: 0;
  border-radius: 0;
  padding: 10px 4px;
}
/deep/.van-stepper__plus {
  background-color: #fff;
  border-radius: 0;
  border: 0.01rem solid #ccc;
}
/deep/.van-stepper__minus {
  border-radius: 0;
  border: 0.01rem solid #ccc;
  background-color: #fff;
}
</style>
